這篇文章內容主要來自 Vue School 的 "Vue.js 3 Fundamental with the Composition API" 課程。該專案原本以 TypeScript 及 Composition API 開發，並且已分別移植到 Angular 19 和 Svelte 5，實際體驗三者在開發上的異同。

這是一個簡單的購物車應用，可以新增和刪除購物車項目。

建立新應用程式

Vue 3 應用程式

npm create vue@latest

Entered the application name to fundamental-vue
Checked TypeScript, Prettier, Eslint in the menu
Chose no to 0xlint 

cd fundamental-vue3
npm i
npm run dev

應用程式可在 http://localhost:5173 執行。

SvelteKit 應用程式

npx sv create fundamental-svelte

Which template would you like?  Choose SvelteKit minimal
Add type checking with TypeScript? Yes, using Typescript syntax
What would you like to add to your project? Choose prettier, eslint, sveltekit-adapter
sveltekit-adapter: Which SvelteKit adapter would you like to use? Auto
Which package manager do you want to install dependencies with? npm

cd fundamental-svelte
npm i
npm run dev

應用程式可在 http://localhost:5173 執行。

Angular 19 應用程式

ng new fundamental-angular

Select any stylesheet format,  I chose SCSS out of habit.
Type no to SSR and SSG.

cd fundamental-angular
npm i
ng serve

應用程式會在 http://localhost:4200 執行。

安裝 Icon 圖標套件

為讓 demo 更有趣，我在按鈕上加入了圖標。Vue 與 Svelte 選用 Iconify，Angular 則選用 ng-icons。

Vue 3 應用程式

npm install --save-dev --save-exact @iconify/vue

SvelteKit 應用程式

npm install --save-dev --save-exact @iconify/svelte

Angular 19 應用程式

npm install --save-exact @ng-icons/core @ng-icons/materialicons

複製並編輯 CSS 樣式

Vue 3 應用程式

直接於 main.css 更新 CSS 樣式。
CSS 原始碼: https://github.com/railsstudent/fundamental-vue3/blob/main/src/assets/main.css

SvelteKit 應用程式

為讓全站頁面都套用全域樣式，我採取如下做法：

1. 新增 routes/+layout.svelte 檔案：

<script lang="ts">
import './global.css';

let { children } = $props();
</script>

{@render children()}

2. 在 routes/ 下建立 global.css

直接於 styles.scss 更新 CSS 樣式。
CSS 原始碼: https://github.com/railsstudent/fundamental-vue3/blob/main/src/assets/main.css

Angular 19 應用程式

直接於 styles.scss 更新 CSS 樣式。
CSS 原始碼: https://github.com/railsstudent/fundamental-vue3/blob/main/src/assets/main.css

資源

• Github 專案：
  • https://github.com/railsstudent/fundamental-vue3
  • https://github.com/railsstudent/fundamental-angular
  • https://github.com/railsstudent/fundamental-svelte
• Github Pages：
  • https://railsstudent.github.io/fundamental-vue3/
  • https://railsstudent.github.io/fundamental-angular
  • https://railsstudent.github.io/fundamental-svelte